<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fontawesome/css/all.css">
    <style>
        li{
            list-style: none;
        }
      li::before{
            /* 通过伪元素来设置图标字体
              找到要设置的图标元素，通过before或after
               在content中设置字体的编码
               设置字体的样式
               font-family:Font Awesome 5 Brands ; fab类
            font-family: Font Awesome 5 Free;
            font-weight: 900;
            */
            content: '\f368';
            /* font-family:Font Awesome 5 Brands ; fab类*/
            font-family: Font Awesome 5 Free;/* fas */
            font-weight: 900;
            color: blue;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <!-- 图标字体（iconfont）
              在网页中经常需要使用一些图标
            可以通过图片引入图片本身比较大，并且不灵活
            所以在使用图标时。我们还可以将图标设置为字体
            通过font-face的形式来对字体进行引入
            选择我们就可以通过使用字体形式来使用图标

         font awesome
         将all.css引入到网页中

         使用图标字体
            直接通过类名来使用字体
            -->
            <i class="fas fa-bell" style="font: size 20px; color: #bfa ;"></i>
            <i class="fas fa-bell-slash"></i>
            <i class="fab fa-accessible-icon"></i>



            <ul>
                <li>星期一</li>
                <li>星期二</li>
                <li>星期三</li>
                <li>星期四</li>
                <li>星期五</li>
                <li>星期六</li>
            </ul>
            <!-- 通过实体来使用字体
                &#x图标的编码  
            -->
            <span class="fas">&#xf1b0;</span>
</body>
</html>